<template lang="shiMingRenZheng">
    <div>
        <!-- 表头 -->
        <div>
            <van-nav-bar title="实名认证" style="background-color: #f9f9f9;" left-arrow>
                <template #right>
                    <van-icon @click="wenti" class="right_icon" name="question-o" size="20" />
                </template>
                <template #left>
                    <van-icon class="template_icon" @click="tuiChuShiMingRenZheng" name="arrow-left" size="18" />
                </template>
            </van-nav-bar>
        </div><br>
        <!-- 发票类型 -->
        <div class="faPiao">发票类型</div>
        <!-- 按钮 -->
        <div class="div_button">
            <van-button :class="aaa==1?'red':''" type="default" style="width: 160px;" @click="geRen">个人认证</van-button>
            <van-button :class="aaa==0?'red':''" type="default" style="width: 160px;" @click="qiYe">企业认证</van-button>
        </div><br>
        <!-- 个人认证 -->
        <div v-if="aaa==1">
            <van-cell-group>
                <van-field v-model="username" label="姓名" placeholder="请输入认证人姓名" />
                <van-field v-model="Documenttype" label="证件类型" placeholder="二代身份证" />
                <van-field v-model="Documenttype" label="证件号码" placeholder="请输入证件号码" />


                <div @click="show = true">
                    <van-field v-model="Documenttype" label="证件正面照片" placeholder="点击上传" />
                    <van-field v-model="Documenttype" label="证件反面照片" placeholder="点击上传" />

                    <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
                </div>
            </van-cell-group>
        </div>
        <div v-else>
            <van-cell-group>
                <van-field v-model="name" label-width="130px" required label="认证人姓名" placeholder="请输入认证人姓名" />
                <van-field v-model="phone" label-width="130px" required label="认证人证件类型" placeholder="二代身份证" />
                <van-field v-model="phone" label-width="130px" required label="认证人证件号码" placeholder="请输入证件号码" />
                <van-field v-model="phone" label-width="130px" required label="企业名称" placeholder="请输入企业名称" />
                <van-field v-model="phone" label-width="130px" required label="营业执照注册号" placeholder="请输入营业执照注册号" />
                <van-field v-model="phone" label-width="130px" required label="企业法人" placeholder="请输入法人姓名" />
                <van-field v-model="phone" label-width="130px" required label="企业法人证件类型" placeholder="二代身份证" />
                <van-field v-model="phone" label-width="130px" required label="企业法人证件号码" placeholder="请输入法人身份证号码" />
                <van-field v-model="phone" label-width="130px" required label="企业联系人" placeholder="请输入联系人姓名" />
                <van-field v-model="phone" label-width="130px" required label="企业联系电话" placeholder="请输入联系人电话" />

                <div @click="show = true">
                    <van-field v-model="Documenttype" label-width="130px" label="法人证件正面照片" placeholder="点击上传" />
                    <van-field v-model="Documenttype" label-width="130px" label="法人证件背面照片" placeholder="点击上传" />
                    <van-field v-model="Documenttype" required label-width="130px" label="营业执照" placeholder="点击上传" />
                    <van-field v-model="Documenttype" label-width="130px" label="其他资质证明" placeholder="请打包上传" />

                    <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
                </div>

            </van-cell-group><br>

            <!-- 提交 -->
            <div class="div_van-button">
                <van-button color="#52bc9b" style="width: 80%;" @click="tiJiao">提交</van-button>
            </div>
        </div>
    </div>
</template>
<script>
    import Vue from 'vue';
    import { Icon, Tab, Tabs, Button, Field, ActionSheet ,Toast } from 'vant';

    export default {
        data() {
            return {
                aaa: 1,
                username: '',
                Documenttype: "",
                show: false,
                name: "",
                phone: "",
                actions: [{ name: '立即拍照' }, { name: '从相册选择' }, { name: '取消' }],
            }
        },
        components: {},
        computed: {},
        methods: {
            // 退出个人认证
            tuiChuShiMingRenZheng() {
                this.$router.go(-1)
            },
            // 切换
            geRen() {
                this.aaa = 1
            },
            // 切换
            qiYe() {
                this.aaa = 0
            },
            // 下面弹出
            onSelect(item) {
                // 默认情况下点击选项时不会自动收起
                // 可以通过 close-on-click-action 属性开启自动收起
                this.show = false;
                // Toast(item.name);
            },
            //提交
            tiJiao(){
                this.$router.push("/geRen")
                Toast({
                    message: '提交成功',
                    icon: 'passed',
                });
            },
            // 跳发票常见问题
            wenti(){
                this.$router.push("/wenTi")
            }
        },
    }
</script>


<style lang="less" scoped>
    .red{
        border: 1px solid red;
        color: red;
    }
    .van-nav-bar .template_icon {
        color: #52bc9b;
    }

    .van-nav-bar .right_icon {
        color: gray;
    }

    .van-button {
        border-radius: 6px;
    }

    .faPiao {
        margin: 16px 26px;
    }

    .div_button {
        display: flex;
        justify-content: space-around;
    }
.div_van-button{
    text-align: center;
}
</style>